<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.global.js"></script>
  </head>
  <body>
    <div id="app"></div>

    <script>
      /* 只负责采集用户数据 */
      const DataPicker = {
        template: `
            <div class="data-picker">
                <!-- 用户的输入与组件内维护的核心数据userInput做双向绑定 -->
                <input type="text" v-model="userInput">

                <!-- 点击按钮时将采集到的用户输入提交给【父组件/业务调度组件】 -->
                <button @click="submitData">提交</button>
            </div>
            `,

        /* 组件内维护用户的输入数据 */
        data() {
          return {
            userInput: "",
          };
        },

        methods: {
          /* 发送自定义事件 将用户输入提交给【父组件/业务调度组件】 */
          submitData() {
            // 直接一个子父通信（自定义事件） 将用户输入发送给父组件
            this.$emit("dataGot", this.userInput);

            // 清空输入框
            this.userInput = "";
          },
        },

        // 定义自定义事件
        emits: ["dataGot"],
      };

      /* 只负责展示数据 */
      const DataLister = {
        template: `
            <ul class="data-lister">
                <!-- 列表渲染list数据 在设计数据结构的时候给每个item一个id用于唯一标识 -->
                <!-- 当用户点击Item时 直接告诉【父组件/业务调度组件】哪个item被点击了 后续业务逻辑交由父组件自行处理 -->
                <li 
                v-for="item in list" :key="item.id" 
                @click="onItemClick(item.id)">
                    {{item.task}}
                </li>
            </ul>
            `,

        // 接收由【父组件/业务调度组件】传入的列表数据
        props: ["list"],

        // 定义向父组件发送的自定义事件
        emits: ["itemClick"],

        methods: {
          /* 发送自定义事件 告诉父组件哪个Item被点击了 后续业务逻辑交由父组件自行处理 */
          onItemClick(id) {
            // 转达给父组件即可
            this.$emit("itemClick", id);
          },
        },
      };

      /* 父组件调度业务逻辑 */
      const TodoList = {
        template: `
            <!-- DataPicker -->
            <!-- 接收【用户提交输入】自定义事件 将用户的输入封装为一个item插入到todos -->
            <data-picker @data-got="addTodo"></data-picker>
            <hr>

            <!-- DataLister -->
            <!-- 接收【用户点击Item】自定义事件 将点击的item执行删除 -->
            <data-lister :list="todos" @item-click="removeTodo"></data-lister>
            `,
        components: {
          DataPicker,
          DataLister,
        },
        data() {
          return {
            todos: [
              {
                id: 1,
                task: "卷JS——我学习我快乐",
              },
              {
                id: 2,
                task: "卷Vue——没事没事，毕竟刚接触框架",
              },
              {
                id: 3,
                task: "卷React——我感觉我还能再抢救一下",
              },
            ],
          };
        },
        
        methods: {
          /* 将用户的输入封装为一个item插入到todos */
          addTodo(event) {
            this.todos.push({
              id: Date.now(),
              task: event,
            });
          },

          removeTodo(event) {
            // 对todos做过滤 只要item.id不为用户点击的id 就通过过滤（用户点击的那一个item被排除在外——狗带）
            this.todos = this.todos.filter((item) => item.id !== event);
          },
        },
      };

      const app = Vue.createApp(TodoList);
      app.mount("#app");
    </script>
  </body>
</html>
